<script setup>
import figureSwiper from './figureSwiper.vue'
import { ref } from 'vue'

defineProps({
    modelValue: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['update:modelValue', 'createConfirm'])



function onClose() {
    emit('update:modelValue', false)
}

// 立即生成
function startFn() {
    emit('createConfirm')
}



const customStyle = `background-color: var(--a-adapter-bg-color)`
</script>

<template>
    <van-popup :show="modelValue" round="16" position="bottom" closeable @close="onClose" :custom-style="customStyle">
        <div class="selectImagePopup">
            <div class="title">请选择形象</div>
            <figureSwiper></figureSwiper>
            <div class="footer">
                <div class="create_btn" @click="startFn">
                    <div class="create_btn_title">立即生成</div>
                    <div class="create_btn_label">消耗:2算力</div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<style lang='scss' scoped>
.selectImagePopup {
    box-sizing: border-box;
    width: 100%;
    height: 80vh;
    background-color: var(--a-adapter-bg-color);
    padding-top: 30rpx;
    overflow: hidden;

    .title {
        font-size: 32rpx;
        color: var(--a-one-text-color);
        text-align: center;
        font-weight: normal;
    }

    .footer {
        margin-top: 50rpx;
        padding: 0 30rpx;

        .create_btn {
            height: 86rpx;
            background: #83CD88;
            border-radius: 44rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .create_btn_title {
                font-size: 32rpx;
                color: #FFFFFF;
            }

            .create_btn_label {
                font-size: 20rpx;
                color: #FFFFFF;
            }
        }
    }
}
</style>